<template>
  <view class="keyboard">
    <view class="tools-box">
      <view class="input-box">{{ inputVal }} </view>
      <view class="but-box">
        <button class="clear but" @click="clear">清除</button>
        <button class="ok but" @click="ok">确定</button>
      </view>
    </view>

    <view class="keyboard-item-box">
      <button
        v-for="(item, index) in keyboardItems"
        :key="index"
        hover-class="button-hover"
        class="keyboard-item"
        @click.stop="keyboardHandle(item.value)"
      >
        {{ item.label }}
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, toRefs } from 'vue'

const emits = defineEmits(['update:inputVal', 'clear', 'ok'])

const props = withDefaults(
  defineProps<{
    inputVal: string
  }>(),
  {
    inputVal: '',
  },
)

const { inputVal } = toRefs(props)

const keyboardItems = ref<
  Array<{
    label: string
    value: string | number
  }>
>([])

const keyboardHandle = (value: any) => {
  if (value === 'delete') {
    emits(
      'update:inputVal',
      (inputVal.value = inputVal.value.substring(0, inputVal.value.length - 1)),
    )
    return
  }

  emits('update:inputVal', (inputVal.value += value))
}

const initKeyboardItems = () => {
  for (let i = 1; i <= 9; i++) {
    keyboardItems.value.push({
      label: i + '',
      value: i,
    })
  }
  keyboardItems.value.push({
    label: '.',
    value: '.',
  })
  keyboardItems.value.push({
    label: '0',
    value: 0,
  })
  keyboardItems.value.push({
    label: '删除',
    value: 'delete',
  })
}

initKeyboardItems()

const clear = () => {
  emits('update:inputVal', '')
  emits('clear')
}
const ok = () => {
  emits('ok', {
    inputValue: inputVal.value,
  })
  emits('update:inputVal', '')
}
</script>

<style scoped lang="scss">
.keyboard {
  width: 100%;
  height: auto;

  .tools-box {
    width: 100%;
    height: 120rpx;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0 10px;
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
    font-size: 1.25rem;
    font-weight: 700;

    .input-box {
      width: 60%;
      height: 70rpx;
      background-color: #f8f8f8;
      border-radius: 30rpx;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 10px;
    }

    .but-box {
      width: 40%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .but {
        height: 70rpx;
        font-size: 0.85rem;
      }
      .clear {
        background-color: #fc5531;
        color: #fff;
      }
      .ok {
        background-color: #00b26a;
        color: #fff;
      }
    }
  }

  .keyboard-item-box {
    width: 100%;
    height: 450rpx;
    background-color: #f1f3f4;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 10px;
    .keyboard-item {
      width: 32%;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      font-size: 1.25rem;
      font-weight: 700;
      border-radius: 10rpx;
    }
  }
}
</style>
